<template>
	<view class="page">
		<view class="searchRow">
			<view class="leftBox">
				<view class="row">
					<view class="label">
						开始时间:
					</view>
					<view class="val" @click="beginTimeShow=true">
						{{form.beginTime ? form.beginTime : '请选择' }}
					</view>
				</view>
				<view class="row">
					<view class="label">
						结束时间:
					</view>
					<view class="val" @click="endTimeShow=true">
						{{form.endTime ? form.endTime : '请选择' }}
					</view>
				</view>
			</view>
			<view class="btn" @click="goSearch">
				查询
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: calc( 100vh - 242rpx )" @scrolltolower="loadMord">
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="leftBox">
						<view class="type">
							{{item.category == 1 ? '事假' : '病假'}} 
							<view class="status" v-if="item.status==1">
								待审核
							</view>
							<view class="status sucStatus" v-else-if="item.status==2 && item.backAfterDate">
									已销假
							</view>
							<view class="status sucStatus" v-else-if="item.status==2">
								已通过
							</view>
							<view class="status errStatus" v-else-if="item.status==3">
								未通过
							</view>
						</view>
						<view class="row">
							<text>是否出校:</text> {{item.outSchool==1 ? '是' : '否'}}
						</view>
						<view class="row">
							<text>请假时间:</text> {{item.begTime}} 至 {{item.endTime}} 
						</view>
						<view class="row">
							<text>请假事由:</text> {{item.subjectContent}}
						</view>
						<view class="row" v-if="item.remarks">
							<text>备注:</text> {{item.remarks}}
						</view>
						<view class="row" v-if="item.backAfterDate">
							<text>销假时间:</text> {{item.backAfterDate}}
						</view>
						<view class="btnRow" >
							<view class="btn" @click="handleEdit(item)" v-if="item.status==1">
								编辑
							</view>
							<view class="btn btn2" @click="handleReportBack(item)" v-if="item.status==2 && !item.backAfterDate">
								销假
							</view>
						</view>
					</view>
				</view>
				<u-empty mode="list" v-if="!list.length" text="暂无数据">
				</u-empty>
			</view>
		</scroll-view>
		
		<u-datetime-picker
		    :show="beginTimeShow" ref="datetimePicker" v-model="beginTime" 
		    mode="date"  @cancel="beginTimeShow=false" @confirm="beginTimeConfirm"
		       ></u-datetime-picker>
		<u-datetime-picker
			:show="endTimeShow" ref="datetimePicker" v-model="endTime" 
			mode="date"  @cancel="endTimeShow=false" @confirm="endTimeConfirm"
		   ></u-datetime-picker>
	</view>
</template>

<script>
	import {memberAskslist,eltMemberAsksBackAfterApi} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				form:{
					currPage : 1,
					pageSize : 10,
					beginTime : '',
					endTime : '',
					status: '',
					mainframeNo : uni.getStorageSync('selectInfoAccount').mainframeNo,
				},
				list: [],
				beginTime: Number(new Date()),
				endTime: Number(new Date()),
				beginTimeShow : false,
				endTimeShow : false,
				total: '',
			}
		},
		methods: {
			handleReportBack(item){
				eltMemberAsksBackAfterApi({
					id: item.id
				}).then(res=>{
					this.setMessage('销假成功')
				})
			},
			handleEdit(item){
				this.goPage('/pages/componentsC/leaveManage/editForm',{
					item: JSON.stringify(item)
				})
			},
			goSearch(){
				this.form.currPage = 1
				this.list = []
				this.getList()
			},
			loadMord(){
				if(this.total==this.list.length) return this.setMessage('没有更多数据了！')
				this.form.currPage++
				this.getList()
			},
			beginTimeConfirm(e){
				let date = this.dateformat(e.value).split(' ')[0]
				this.form.beginTime = date
				this.beginTimeShow = false
			},
			endTimeConfirm(e){
				let date = this.dateformat(e.value).split(' ')[0]
				this.form.endTime = date
				this.endTimeShow = false
			},
			getList(){
				let form = this.form
				let keys = Object.keys(form)
				keys.forEach(key=>{
					if(!form[key]) delete form[key]
				})
				
				// if(this.form.currPage==1) this.list = []
				memberAskslist(this.form).then(res=>{
					// this.list = this.list.concat(res.page.list)
					let list =  this.list.concat(res.page.list)
					list.forEach((item,index)=>{
						item.begTime = item.begTime.split(' ')[0]
						item.endTime = item.endTime.split(' ')[0]
						this.$set(this.list,index,item)
					})
					this.total = res.page.totalCount
					// this.list = list
					// this.list.splice(0,0)
					// this.$set(this.list,list)
					console.log(this.list);
				})
			}
		},
		mounted() {
			// this.getList()
		}
	
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #f8f8f8;
	height: 100vh;
	.searchRow{
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		border-bottom: 2rpx solid #dedede;
		.leftBox{
			flex: 1;
			.row{
				display: flex;
				align-items: center;
				height: 70rpx;
				.label{
					margin-right: 30rpx;
				}
				.val{
					
				}
			}
		}
		.btn{
			width: 140rpx;
			height: 56rpx;
			border-radius: 10rpx;
			color: #fff;
			@include flexCenter;
			background-color: #4089f0;
		}
		
	}
	.list{
		margin-top: 20rpx;
		.item{
			padding: 20rpx 40rpx;
			width: 100%;
			border-bottom:  2rpx solid #dedede;
			.leftBox{
				.type{
					font-weight: 600;
					font-size: 30rpx;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					.status{
						color: #4089f0;
						border: 2rpx solid #4089f0;
						padding: 3rpx 6rpx;
						border-radius: 10rpx;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
					.errStatus{
						color: #f56c6c !important;
						border: 2rpx solid #f56c6c !important;
					}
					.sucStatus{
						color: #5ac725 !important;
						border: 2rpx solid #5ac725 !important;
					}
				}
				.row{
					margin-bottom: 5rpx;
					text{
						margin-right: 20rpx;
					}
				}
				.btnRow{
					display: flex;
					justify-content: flex-end;
					.btn2{
						background: #f9ae3d !important;
					}
					.btn{
						width: 90rpx;
						height: 50rpx;
						border-radius: 10rpx;
						color: #fff;
						@include flexCenter;
						background-color: #4089f0;
					}
				}
			}
		}
	}
	
}
</style>
